var $posX = 240;
var $posY = 160;
var $velX = 2;
var $velY = 2;

function initializeCanvas() {
	var canvas = document.getElementById("JsColorPicker");  
	var processingInstance = new Processing(canvas, renderProcessing);
}

function renderProcessing(processing) {  
	processing.size(480, 320);
	processing.smooth();
	
 	processing.draw = function() {  
 		processing.background(55, 55, 55);
 		
 		// getRed(), getGreen(), getBlue() were all exported by the
 		// JsColorPicker class.
		processing.fill(getRed(), getGreen(), getBlue());
	
		// Move the ball.
		$posX = $posX + $velX;
		$posY = $posY + $velY;
		if ($posX < 0) {
			$velX = $velX * -1;
			$posX = 0;
		}
		if ($posY < 0) {
			$velY = $velY * -1;
			$posY = 0;
		}
		if ($posX > 480) {
			$velX = $velX * -1;
			$posX = 480;
		}
		if ($posY > 320) {
			$velY = $velY * -1;
			$posY = 320;
		}	
		processing.ellipse($posX, $posY, 100, 100);
 	};
}